/**
 * Created by shaoting on 16/10/11.
 * 个人中心顶部视图
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    AsyncStorage
} from 'react-native';
var Dimensions = require('Dimensions');
var Width = Dimensions.get('window').width; //屏宽
var HTTPUtil = require('../Main/NXFetch')
var Login = require('../Mine/NXLogin')

var MineTopView = React.createClass({

    getInitialState(){
        return {
            //userName : ''
        }
    },
    componentDidMount(){
        this.loaddata();
    },
    loaddata(){
        var token = '';
        try {
            AsyncStorage.getItem(
                'token',
                (error,result)=>{
                    if (error){
                        alert('取值失败:'+error);
                    }else{
                        // alert('取值成功:'+result);
                        this.token = result
                    }
                }
            )
        }catch(error){
            alert('失败'+error);
        }
        var fetchOptions = {
            method: 'POST',
            headers: {
                'token': this.token
            },

        };
        let url = 'http://www.pintasty.cn/user/personinfo';
        fetch(url, fetchOptions)
            .then((response) => response.json())
            .then((responseJSON) => {
                if(responseJSON.status == 200){
                    dataUser = responseJSON;
                    this.setState({

                        userName:dataUser.data.userName,
                        sign : dataUser.data.sign,
                        followNum:dataUser.data.followNum,
                        follower:dataUser.data.follower,
                        review:dataUser.data.review,
                        collection:dataUser.data.collection,
                        userImage:dataUser.data.userImage,
                    })
                }else  if (responseJSON.status == 301){
                    // alert('请登录')

                }else {
                    alert('访问服务器失败')
                }
            }) .done();
    },
    render() {
        return (
            <View style={styles.topViewStyle}>
                <View>
                    <View style={{flexDirection:'row',justifyContent:'center'}}>
                        <Text style={{fontSize:25,color:'white',marginTop:20}}>个人中心</Text>
                    </View>
                    <View style={{flexDirection:'row',marginTop:20}}>
                        <View>
                            <Image source={{uri:this.state.userImage}} style={{width:80,height:80,borderRadius:40}} />
                        </View>
                        <View style={{justifyContent:'space-between'}}>
                            <Text style={styles.infoTextStyles}>{this.state.userName}</Text>
                            <Text style={{marginLeft: 10,color:'white',fontSize:16}}>{this.state.sign}</Text>
                            <Text style={{marginLeft: 10,color:'white',fontSize:13}}>上海1111</Text>
                        </View>
                    </View>
                    <Text style={styles.editInfoBtnStyle}>🖋  编辑</Text>
                    <View style={{flexDirection: 'row',backgroundColor: 'rgba(180,180,180,1.0)',marginTop:20,justifyContent:'space-around'}}>
                        <View>
                            <Text style={{color:'white',textAlign:'center'}}>{this.state.followNum}</Text>
                            <Text style={{color:'white'}}>关注</Text>
                        </View>
                        <View>
                            <Text style={{color:'white',textAlign:'center'}}>{this.state.follower}</Text>
                            <Text style={{color:'white'}}>粉丝</Text>
                        </View>
                        <View>
                            <Text style={{color:'white',textAlign:'center'}}>{this.state.review}</Text>
                            <Text style={{color:'white'}} >点评</Text>
                        </View>
                        <View>
                            <Text style={{color:'white',textAlign:'center'}}>{this.state.collection}</Text>
                            <Text style={{color:'white'}}>收藏</Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    },

});


var styles = StyleSheet.create({
    topViewStyle: {
        //height:Platform.OS == 'ios'? 430 : 200,
        backgroundColor: 'rgba(200,200,200,1.0)',
    },
    infoTextStyles: {
        fontSize:20,
        marginLeft: 10,
        color:'white',
    },
    editInfoBtnStyle: {
        marginTop:10,
        marginLeft: 10,
        backgroundColor:'white',
        width:60,
        color:'red',
        borderRadius:4
    }
});

module.exports = MineTopView;